<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品评论表</title>
<!-- 引入layui样式和脚本 -->
<link rel="stylesheet" type="text/css"
	href="../admin/layui/css/layui.css" />
<script src="../admin/layui/layui.js" type="text/javascript"
	charset="utf-8"></script>
</head>
<body>
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">订单ID</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="orderId" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">商品名</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="proName" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">

				<label class="layui-form-label">商品数量</label>

				<div class="layui-input-inline" style="width: 100px;">

					<input type="text" class="layui-input" name="minPrice">



				</div>

				<div class="layui-form-mid">-</div>

				<div class="layui-input-inline" style="width: 100px;">

					<input type="text" class="layui-input" name="maxPrice">

				</div>

			</div>
			<div class="layui-inline">

				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

				<button type="reset" class="layui-btn layui-btn-primary">重置</button>

			</div>

		</div>

	</form>

	<!-- 表格容器 -->
	<table id="demo" lay-filter="test"></table>
	<script>
		layui.use([ 'table', 'form', 'layer', 'upload' ], function() {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var upload = layui.upload;
			var $ = layui.$;

			//第一个实例
			table.render({
				elem : '#demo',
				url : 'getOrderDetails',//数据接口
				page : true,//开启分页
				id : "idTest",
				cols : [ [ //表头
				{

					field : 'orderId',

					title : 'ID',

					width : 80,

					sort : true
				}, {

					field : 'proId',

					title : '商品Id',

					width : 120
				}, {

					field : 'ordId',

					title : '订单Id',

					width : 120

				}, {

					field : 'proName',

					title : '商品名',

					width : 120

				}, {

					field : 'proPrice',

					title : '商品价格',

					width : 120

				}, {

					field : 'proNum',

					title : '商品数量',

					width : 120

				}, {

					field : 'proUrl',

					title : '商品图片',

					width : 120,
					templet : function(d) {
						return '<img src="showPic/'+d.proUrl+'"/>'
					}

				}, {
					field : 'material',

					title : '材质',

					width : 120
				}, {

					field : 'brand',

					title : '品牌',
					width : 120
				} ] ]
			});//表格渲染结束

			//监听提交

			form.on('submit(formDemo)', function(data) {

				table.reload('idTest', {

					where : data.field

				});
				return false;

			});
		});//脚本结束
	</script>
</body>
</html>